<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="icon/favicon.ico">
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/dayjs.min.js"></script>
    <style type="text/css">
        table tr th{
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="root"></div>
<script type="text/babel">
    class Edit extends React.Component{

        state = {
            districtList: [],
            airQualityObj : {},
            lodded : false
        }

        componentDidMount(){
            // 加载区域
            this.init();
        }

        // 初始化加载地区
        init = () => {
            let districtList =  sessionStorage.getItem("districtList") || "";
            let airQualityList = sessionStorage.getItem("airQualityList") || "";
            districtList = JSON.parse(districtList);
            airQualityList = JSON.parse(airQualityList);
            let search = location.search || "";
            let id = search.substring(search.lastIndexOf("=") + 1);
            let obj = airQualityList.find((airObj) => {
                return airObj.id === Number(id);
            })
            console.log(Number(id));
            this.setState({
                districtList,
                airQualityObj : obj || {}
            })
        }

        back = () => {
            history.back();
        }

        submit = (e) => {
            e.preventDefault();
            console.log(e)
        }

        itemChange = (name) => {
            return (e) => {
                let val = e.target.value;
                console.log(name,val)
            }
        }
        render(){
            const { districtList,airQualityObj } = this.state;
            return (
                <div>
                    <h2>空气质量信息维护界面</h2>
                    <div>
                        <form id="form" action="http://localhost:8080/airQualityIndex/update" method="post" onSubmit={this.submit}>
                            <table>
                                <tbody>
                                    <tr>
                                        <th>检测区域:</th>
                                        <td>
                                            <select name="districtId" className="sel" value={airQualityObj.districtId} onChange={this.itemChange('districtId')}>
                                                {
                                                    districtList.map((obj)=>{
                                                        return <option value={obj.id} key={obj.id}>{obj.name}</option>
                                                    })
                                                }
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>检测日期:</th>
                                        <td>
                                            <input id="date" type="date" name="monitorTime" value={airQualityObj.lastModifityTime}/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>PM10值:</th>
                                        <td>
                                            <input name="pm10" type="text"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>PM2.5值:</th>
                                        <td>
                                            <input name="pm25" type="text"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>监测站:</th>
                                        <td>
                                            <input name="monitoringStation" type="text"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>最后修改时间:</th>
                                        <td id="date2"></td>
                                    </tr>
                                    <tr>
                                        <th colSpan="2" style={{textAlign: 'center'}}>
                                            <button type="submit" className="update">更新</button>
                                            <button type="button" className="delete">删除</button>
                                            <button type="button" onClick={this.back}>返回</button>
                                        </th>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            )
        }
    }
    ReactDOM.render(<Edit/>,document.getElementById("root"));
</script>

<!--<script>-->
<!--    window.onload = function (){-->
<!--        $.get('${pageContext.request.contextPath}/district/list',(resp) => {-->
<!--            if(resp.code === 200){-->
<!--                $(".sel").html('-&#45;&#45;请选择-&#45;&#45;');-->
<!--                $.each(resp.data,(index,obj) => {-->
<!--                    let opt;-->
<!--                    if(obj.id === ${data.districtId}){-->
<!--                        opt = $("<option value='"+obj.id+"' selected>"+obj.name+"</option>")-->
<!--                    }else{-->
<!--                        opt = $("<option value='"+obj.id+"'>"+obj.name+"</option>")-->
<!--                    }-->
<!--                    $(".sel").append(opt);-->
<!--                })-->
<!--            }-->
<!--        });-->

<!--        $("#date").attr("value",dayjs(${data.time1}).format('YYYY-MM-DD'))-->
<!--        $("#date2").html(dayjs(${data.time2}).format('YYYY-MM-DD HH:mm:ss'))-->
<!--    }-->

<!--    $(document).ready(function (){-->
<!--        $(".update").click(function () {-->
<!--            if(confirm("确认修改?")){-->
<!--                $.ajax({-->
<!--                    url : '${pageContext.request.contextPath}/airQualityIndex/update',-->
<!--                    type: 'post',-->
<!--                    data : {-->
<!--                        id : ${data.id},-->
<!--                        districtId: $(".sel").val(),-->
<!--                        reqTime: $("#date").val(),-->
<!--                        pm10 : $("input[name='pm10']").val(),-->
<!--                        pm25 : $("input[name='pm25']").val(),-->
<!--                        monitoringStation : $("input[name='monitoringStation']").val()-->
<!--                    },-->
<!--                    datatype: "json",-->
<!--                    success : (resp)=>{-->
<!--                        if(resp.code === 200){-->
<!--                            alert(resp.msg);-->
<!--                            window.location.href = "${pageContext.request.contextPath}/index.html"-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            }-->
<!--        });-->

<!--        $(".delete").click(function () {-->
<!--            if(confirm("确认删除?")){-->
<!--                $.ajax({-->
<!--                    url : '${pageContext.request.contextPath}/airQualityIndex/delete?id=${data.id}',-->
<!--                    type: 'get',-->
<!--                    datatype: "json",-->
<!--                    success : (resp)=>{-->
<!--                        alert(resp.msg);-->
<!--                        window.location.href = "${pageContext.request.contextPath}/index.html"-->
<!--                    }-->
<!--                })-->
<!--            }-->
<!--        })-->
<!--    })-->
<!--</script>-->
</body>
</html>